<template>
	<view class="wrap">

		<!-- 班级信息区域 -->
		<view class="class-info">
			<view class="class-header">
				<view class="class-name">{{ classInfo.name }}</view>
				<view class="class-members">({{ classInfo.memberCount }}人)</view>
				<view class="switch-class"></view>
				<view class="class-manage" @click="goToManage">班级管理
					<u-icon name="arrow-right" color="#666" size="28"></u-icon>
				</view>
			</view>

			<view class="class-code-section">
				<view class="code-label">班级口令：</view>
				<view class="code-value">{{ classInfo.code }}</view>
				<view class="copy-icon" @click="copyCode">📋</view>
				<view class="invite-btn" @click="inviteMembers">
					<text class="invite-text">+邀请成员</text>
				</view>
			</view>
		</view>

		<!-- 标签页导航 -->
		<view class="tab-nav">
			<view class="tab-item" :class="{ active: activeTab === 'homework' }" @click="switchTab('homework')">
				<text class="tab-text">作业</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'checkin' }" @click="switchTab('checkin')">
				<text class="tab-text">打卡</text>
				<view class="badge">0/2</view>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'members' }" @click="switchTab('members')">
				<text class="tab-text">成员</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 作业标签页内容 -->
			<view v-if="activeTab === 'homework'" class="homework-content">


				<!-- 作业列表 -->
				<view class="homework-list">
					<view class="homework-item" v-for="(item,index) in homeworkList" :key="index"
						@click="homeworkDetails(item)">
						<view class="homework-icon">📝</view>
						<view class="homework-info">
							<view class="homework-title">{{item.jobName}}</view>
							<view class="homework-status">未完成</view>
							<view class="homework-meta">
								<text class="homework-time">{{item.jobTime}}发布</text>
								<text class="homework-progress">0/{{item.classMemberCount}}人已完成</text>
							</view>
						</view>
					</view>
				</view>

				<view class="no-more-data">
					<text>没有数据了</text>
				</view>
			</view>

			<!-- 打卡标签页内容 -->
			<view v-if="activeTab === 'checkin'" class="checkin-content">
				<!-- 今日打卡按钮 -->
				<view class="today-checkin-btn" @click="todayCheckin">
					<text class="checkin-btn-text">今日读了0本，打0卡</text>
				</view>

				<!-- 打卡记录列表 -->
				<view class="checkin-list">
					<!-- 打卡记录项 -->
					<view class="checkin-item">
						<view class="user-avatar">
							<text class="avatar-icon">👤</text>
						</view>
						<view class="checkin-info">
							<view class="checkin-header">
								<text class="user-name">某老师</text>
								<text class="checkin-time">5小时前</text>
							</view>
							<view class="checkin-desc">打卡第2天，读了3本</view>
							<view class="checkin-title">哈哈哈哈</view>
							<view class="books-section">
								<text class="books-count">读了3本</text>
								<view class="books-grid">
									<view class="book-item">
										<view class="book-cover orange">
											<text class="book-icon">☀️</text>
										</view>
										<text class="book-title">Fun at t...</text>
									</view>
									<view class="book-item">
										<view class="book-cover blue">
											<text class="book-icon">⚫</text>
										</view>
										<text class="book-title">The Pan...</text>
									</view>
									<view class="book-item">
										<view class="book-cover green">
											<text class="book-icon">🟡</text>
										</view>
										<text class="book-title">Who am I</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 第二个打卡记录 -->
					<view class="checkin-item">
						<view class="user-avatar">
							<text class="avatar-icon">👤</text>
						</view>
						<view class="checkin-info">
							<view class="checkin-header">
								<text class="user-name">某老师</text>
								<text class="checkin-time">3天前</text>
							</view>
							<view class="checkin-desc">打卡第1天，读了2本</view>
							<view class="checkin-title">今天读了2本书</view>
							<view class="books-section">
								<text class="books-count">读了2本</text>
								<view class="good-badge">
									<text class="good-text">Good</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 成员标签页内容 -->
			<view v-if="activeTab === 'members'" class="members-content">
				<!-- 成员列表 -->
				<view class="member-list">
					<!-- 成员项 - 某老师 -->
					<view class="member-item" v-for="(item,index) in classmembers" :key="index">
						<view class="member-avatar purple">
							<text class="avatar-text">{{getFirstChar(item.memberName)}}</text>
						</view>
						<view class="member-info">
							<view class="member-name">{{item.memberName}}</view>
							<view class="member-status">阅读{{item.readingDays || 0}}天，读了{{item.totalBooks || 0}}本</view>
						</view>
						<view class="member-tags">
							<view class="tag teacher-tag">
								<text class="tag-icon">🏷️</text>
								<text class="tag-text">老师</text>
							</view>
							<view class="tag me-tag">
								<text class="tag-text">我</text>
							</view>
							<view class="tag unchecked-tag" v-if="!item.isPunchIn">
								<text class="tag-text">未打卡</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as ClassApi from '@/api/class.js'


	export default {
		data() {
			return {
				activeTab: 'homework', // 当前激活的标签页
				classInfo: {
					id: undefined,
					name: '',
					memberCount: undefined,
					code: '',
					teacher: ''
				},
				classmembers: [],
				homeworkList: []
			}
		},

		onLoad(options) {
			this.classInfo.id = options.classId
			this.classInfo.name = options.className
			this.classInfo.memberCount = options.memberCount
			this.classInfo.code = options.code
			this.classInfo.teacher = options.teacher
			this.getAssignmentsByClassId()
		},

		methods: {
			/**
			 * 返回上一页
			 */
			goBack() {
				uni.navigateBack();
			},
			getFirstChar(str) {
				return str[0];
			},

			async homeworkDetails(item) {
				try {
					uni.navigateTo({
						url: `/pages/class/homeworkDetails/homeworkDetails?homeworkId=${item.id}`
					});
				} catch (error) {
					console.error('进入作业详情失败:', error);
				}
			},

			async getAssignmentsByClassId() {
				const resp = await ClassApi.getAssignmentsByClassId({
					classId: this.classInfo.id.trim()
				});
				if (resp.code === 0 && resp.data) {
					this.homeworkList = resp.data;
				}
			},


			/**
			 * 切换标签页
			 */
			switchTab(tab) {
				this.activeTab = tab;
				if (tab === 'members') {
					this.getClassMembers();
				}
				if (tab === 'homework') {
					this.getAssignmentsByClassId()
				}
			},

			async getClassMembers() {
				const resp = await ClassApi.getClassMembers({
					classId: this.classInfo.id.trim()
				});
				if (resp.code === 0 && resp.data) {
					this.classmembers = resp.data;
				}
			},

			async copyCode() {
				try {
					await uni.setClipboardData({
						data: this.classInfo.code
					});

					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				} catch (error) {
					uni.showToast({
						title: '复制失败，请重试',
						icon: 'none'
					});
					console.error('复制失败:', error);
				}
			},


			/**
			 * 邀请成员
			 */
			inviteMembers() {
				uni.showToast({
					title: '邀请成员功能开发中',
					icon: 'none'
				});
			},

			/**
			 * 创建作业
			 */
			createHomework() {
				uni.navigateTo({
					url: `/pages/class/create-homework?classId=${this.classInfo.id}`
				});
			},

			/**
			 * 今日打卡
			 */
			todayCheckin() {
				uni.showToast({
					title: '今日打卡功能开发中',
					icon: 'none'
				});
			},

			/**
			 * 跳转到班级管理
			 */
			goToManage() {
				console.log("11@@@@@" + this.classInfo.id)
				uni.navigateTo({
					url: `/pages/class/manage?id=${this.classInfo.id}
        &name=${this.classInfo.name}
        &code=${this.classInfo.code}
        &teacher=${this.classInfo.teacher}`
				});
			}
		}
	}
</script>

<style>
	.wrap {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.status-bar {
		width: 100%;
		background-color: #fff;
	}

	.nav-bar {
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 40rpx;
		color: #333;
		font-weight: bold;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.nav-placeholder {
		width: 60rpx;
	}

	.class-info {
		background-color: #fff;
		padding: 40rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.class-header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.class-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 16rpx;
	}

	.class-members {
		font-size: 28rpx;
		color: #666;
		margin-right: 32rpx;
	}

	.switch-class {
		font-size: 28rpx;
		color: #4FC3F7;
		margin-right: auto;
	}

	.class-manage {
		font-size: 28rpx;
		color: #666;
	}

	.class-code-section {
		display: flex;
		align-items: center;
	}

	.code-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 16rpx;
	}

	.code-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-right: 16rpx;
	}

	.copy-icon {
		font-size: 24rpx;
		margin-right: auto;
	}

	.invite-btn {
		background: linear-gradient(135deg, #4FC3F7 0%, #3f8ef7 100%);
		border-radius: 32rpx;
		padding: 12rpx 24rpx;
	}

	.invite-text {
		font-size: 24rpx;
		color: #fff;
	}

	.tab-nav {
		background-color: #fff;
		display: flex;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.tab-item.active {
		border-bottom: 4rpx solid #4FC3F7;
	}

	.tab-text {
		font-size: 28rpx;
		color: #666;
		margin-right: 8rpx;
	}

	.tab-item.active .tab-text {
		color: #4FC3F7;
		font-weight: 500;
	}

	.badge {
		background-color: #ff4757;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 12rpx;
		min-width: 32rpx;
		text-align: center;
	}

	.content-area {
		flex: 1;
		background-color: #f5f5f5;
	}

	.homework-content {
		padding: 32rpx;
	}

	.create-homework-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 32rpx;
	}

	.create-btn-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}

	.homework-list {
		margin-bottom: 40rpx;
	}

	.homework-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.homework-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #4FC3F7;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		margin-right: 24rpx;
	}

	.homework-info {
		flex: 1;
	}

	.homework-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
	}

	.homework-status {
		font-size: 24rpx;
		color: #ff9500;
		margin-bottom: 16rpx;
	}

	.homework-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.homework-time {
		font-size: 24rpx;
		color: #999;
	}

	.homework-progress {
		font-size: 24rpx;
		color: #999;
	}

	.no-more-data {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.checkin-content {
		padding: 32rpx;
	}

	.members-content {
		padding: 32rpx;
	}

	.member-list {
		margin-bottom: 40rpx;
	}

	.member-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.member-avatar.purple {
		background-color: #9C27B0;
	}

	.member-avatar.blue {
		background-color: #4FC3F7;
	}

	.avatar-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}

	.member-info {
		flex: 1;
		margin-right: 24rpx;
	}

	.member-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 8rpx;
	}

	.member-status {
		font-size: 24rpx;
		color: #666;
	}

	.member-tags {
		display: flex;
		gap: 8rpx;
		flex-direction: column;
		align-items: flex-end;
	}

	.tag {
		border-radius: 12rpx;
		padding: 4rpx 12rpx;
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.teacher-tag {
		background-color: #FFF3E0;
		border: 1rpx solid #FFB74D;
	}

	.me-tag {
		background-color: #E8F5E8;
		border: 1rpx solid #4CAF50;
	}

	.unchecked-tag {
		background-color: #FFEBEE;
		border: 1rpx solid #F44336;
	}

	.tag-icon {
		font-size: 20rpx;
	}

	.tag-text {
		font-size: 20rpx;
		font-weight: 500;
	}

	.teacher-tag .tag-text {
		color: #FF8F00;
	}

	.me-tag .tag-text {
		color: #2E7D32;
	}

	.unchecked-tag .tag-text {
		color: #C62828;
	}

	.today-checkin-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 32rpx;
	}

	.checkin-btn-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}

	.checkin-list {
		margin-bottom: 40rpx;
	}

	.checkin-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		background-color: #e0e0e0;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.avatar-icon {
		font-size: 40rpx;
		color: #999;
	}

	.checkin-info {
		flex: 1;
	}

	.checkin-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.user-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}

	.checkin-time {
		font-size: 24rpx;
		color: #999;
	}

	.checkin-desc {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.checkin-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 16rpx;
	}

	.books-section {
		margin-top: 16rpx;
	}

	.books-count {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		display: block;
	}

	.books-grid {
		display: flex;
		gap: 16rpx;
	}

	.book-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 120rpx;
	}

	.book-cover {
		width: 100rpx;
		height: 140rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8rpx;
	}

	.book-cover.orange {
		background-color: #ff9500;
	}

	.book-cover.blue {
		background-color: #4FC3F7;
	}

	.book-cover.green {
		background-color: #4CAF50;
	}

	.book-icon {
		font-size: 40rpx;
	}

	.book-title {
		font-size: 20rpx;
		color: #666;
		text-align: center;
		line-height: 1.2;
	}

	.good-badge {
		background-color: #4CAF50;
		border-radius: 16rpx;
		padding: 8rpx 16rpx;
		display: inline-block;
		margin-top: 8rpx;
	}

	.good-text {
		font-size: 20rpx;
		color: #fff;
		font-weight: 500;
	}

	.empty-state {
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
</style>